ShowTable of Contents
はじめに(完成形と効果)
スマートフォン用Facebookアプリなどで、画面の左右からメニューを出して、画面の切替を行うアプリが増えてきました。
jQueryMobile1.3でこの機能を実現する「Panelウィジェット」が追加されましたので、この機能を使って前回作成した「メニュー紹介アプリ」にビュー用のXPagesを切り替える機能を追加してみます。
準備する物
前回作成したメニュー紹介アプリを参照してください。
「jQueryMobileを使ってメニュー紹介を作ってみる」
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages%E3%81%A8jQueryMoile%E3%81%A7%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%94%A8%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E7%B4%B9%E4%BB%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86
作成するXPagesのファイル構成
下記の5つのXPagesのうち2つにPanelウィジェットを追加します。
|
XPagesの名前
|
内容
|
|
cate1.xsp
|
＜前回メニュー紹介アプリで作成した物＞
ここにPanelウィジェットを配置します。
|
|
cate2.xsp
|
＜前回メニュー紹介アプリで作成した物＞
|
|
cate3.xsp
|
＜前回メニュー紹介アプリで作成した物＞
|
|
frm.xsp
|
＜前回メニュー紹介アプリで作成した物＞
|
|
search.xsp
|
＜このビューの作成は割愛します＞
ここにPanelウィジェットを配置します。
|
Panelウィジェットを配置し、ビューを切り替える
１．ページの下(ヘッダの上)に＜div＞タグでパネルを定義します。(今回はテーマカラーに”c”を設定しています。)
【XPagesソース】
<!--ページの設定-->
<div data-role="page" data-theme="b">
<div data-role="panel" id="menupanel" data-theme="c">
</div>
<!--ヘッダの設定-->
<div data-role="header">
【イメージ】
２．パネルの中にListviewを配置します。
【XPagesソース】
<!--ページの設定-->
<div data-role="page" data-theme="b">
<div data-role="panel" id="menupanel" data-theme="c">
<ul data-role="listview" data-theme="c">
</ul>
</div>
【イメージ】
３．＜li＞タグを入れます。今回は2つのXPagesを切り替えるので2個配置します。
【XPagesソース】
<div data-role="panel" id="menupanel" data-theme="c">
<ul data-role="listview" data-theme="c">
<li>
</li>
<li>
</li>
</ul>
</div>
【イメージ】
４．右のコアコントロールから、リンクコントロールを＜li＞タグの間に配置します。
【XPagesソース】
<ul data-role="listview" data-theme="c">
<li>
<xp:link escape="true" text="リンク" id="link2"></xp:link>
</li>
<li>
<xp:link escape="true" text="リンク" id="link3"></xp:link>
</li>
</ul>
５．二つ目のリンク(link3)を選択し、別のXPagesを表示するためのリンクを設定します。ラベルに「検索して探す」と入力し、リンクタイプに「ページを開く」、Xpagesに「search.xsp」を選択します。
【XPagesソース】
<li>
<xp:link escape="true" id="link3" text="検索して探す"
value="/search.xsp">
</xp:link>
</li>
【イメージ】
６．一つ目のリンク(link2)を選択し、パネルと閉じるためのリンクを配置し、プロパティを追加します。ラベルに「分類から探す」と入力し、リンクタイプに「アンカー」、アンカーに「#」と入力します。
【XPagesソース】
<li>
<xp:link escape="true" text="分類から探す" id="link2"
value="##{id:#}">
</xp:link>
</li>
【イメージ】
７．一つ目のリンク(link2)を選択し、すべてのプロパティ－基本－attrsの「＋」ボタンを押し、属性を追加します。nameに「data-rel」、valueに「close」と入力します。
【XPagesソース】
<li>
<xp:link escape="true" text="分類から探す" id="link2"
value="##{id:#}">
<xp:this.attrs>
<xp:attr name="data-rel" value="close"></xp:attr>
</xp:this.attrs>
</xp:link>
</li>
【イメージ】
８．パネルを呼び出すリンクとアイコンをヘッダーに設定します。右のコアコントロールからリンクコントロールをヘッダーの下に配置します。
【XPagesソース】
<!--ヘッダの設定-->
<div data-role="header">
<xp:link escape="true" text="リンク" id="link4"></xp:link>
<h1>分類</h1>
</div>
９．リンクコントロールを選択し、Panelコントロールを表示するためのリンクを設定します。ラベルを削除し、リンクタイプに「アンカー」、アンカーに「menupanel」を選択します。
【XPagesソース】
<div data-role="header">
<xp:link escape="true" id="link4"
value="##{id:menupanel}">
</xp:link>
<h1>分類</h1>
</div>
【イメージ】
１０．リンクコントロールを選択し、すべてのプロパティ－基本－attrsの「＋」ボタンを押し、属性を2つ追加します。それぞれ、下記の値を設定します。
|
name
|
value
|
|
data-icon
|
bars
|
|
data-iconpos
|
notext
|
【XPagesソース】
<div data-role="header">
<xp:link escape="true" id="link4"
value="##{id:menupanel}">
<xp:this.attrs>
<xp:attr name="data-icon" value="bars"></xp:attr>
<xp:attr name="data-iconpos" value="notext"></xp:attr>
</xp:this.attrs>
</xp:link>
<h1>分類</h1>
</div>
【イメージ】
１２．切り替わり先となるXPages(search.xsp)にも同様のパネルを配置し、リンク先を設定します。